<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id = "clock"></div>
<script type="text/babel">
    ReactDOM.render(
            <h1>Hello, world!</h1>,
        document.getElementById('example')
    );
</script>
<div id = "root"></div>
<div id="app"></div>
<div id="btn"></div>
<div id = "toggle"></div>
<script type="text/babel">
    ReactDOM.render(
        //insert this dom
            <h1>this my react</h1>,
        document.getElementById('root')
    );

    class Clock extends React.Component{
        constructor(props){
            super(props);
            this.state = {date:new Date()};
        }
        componentDidMount(){
            this.timerID = setInterval(()=>this.tick(),1000)
        }
        componentWillUnmount(){
            clearInterval(this.timerID);
        }
        tick(){
            this.setState({
                date:new Date()
            });
        }
        render(){
            var fontColor = {
                color:'red'
            }
            return (
                    <div>
                    <h1 style={fontColor}>time component</h1>
                    <h2>this is {this.state.date.toLocaleTimeString()}</h2>
                    </div>
            );
        }
    }
    ReactDOM.render(<Clock />,document.getElementById('clock'));

    class Button extends  React.Component{
        constructor(props){super(props);}
        componentDidMount(){}
        componentWillUnmount(){}
        handleClick(event){
            event.preventDefault();
            console.log('this function click!!!');
        }
        render(){
            return (
                <div>
                    <h1>this a is lose</h1>
                    <a href="https://www.baidu.com" onClick={this.handleClick}>click me</a>
                </div>
            );
        }
    }
    ReactDOM.render(<Button />,document.getElementById('btn'))

    class App extends  React.Component{
        constructor(props){
            super(props);
        }
        componentDidMount(){
        }
        componentWillUnmount(){
        }
        render(){
            return (
                    <div>
                        <Clock />
                        <Clock />
                        <Clock />
                    </div>
            );
        }
    }
    ReactDOM.render(<App />,document.getElementById('app'));

    class Toggle extends React.Component{
        constructor(props){
            super(props);
            this.state = {isToggleOn:true};
            this.handleClick = this.handleClick.bind(this);
        }
        componentDidMount(){}
        componentWillUnmount(){}
        handleClick(){
            this.setState(prevState=>({
                isToggleOn : !prevState.isToggleOn
            }));
        }
//        handleClick2 = () =>{
//            //属性初始化器语法
//            console.log('click handleClick2!!!');
//        }
        handleClick3(){
            console.log('click handleClick3!!!');
        }
        render(){
            return (
                <div>
                    <h1>改变控件状态</h1>
                    /*<button onClick={this.handleClick2}>属性初始化器语法</button>*/
                    <button onClick={(event) => this.handleClick3(event)}>回调函数中使用 箭头函数</button>
                    <button onClick={this.handleClick}>{this.state.isToggleOn?'ON':'OFF'}</button>
                </div>
            );
        }
    }
    ReactDOM.render(<Toggle />,document.getElementById('toggle'))

</script>
<h>码云提交</h>
</body>
</html>
